<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间工具</title>
        <meta name="Description" content="使用html,es6,css3"/>
        <style>
            #left_menu {
                width: 100px;
                float: left;
                height: 600px;
                border: #000000 1px solid;
            }
            #right_content {
                float: left;
                width: 800px;
                height: 600px;
                border: #000000 1px solid;
                left: 1px;
            }
            #miao_biao {
                font-size: 3em;
                font-weight: 100;
            }
            #ji_shi_qi {
            }
            #hao_miao {
                font-size: 1em;
            }
        </style>
	</head>
	<body>
        <!-- 模仿windows时间和闹钟, 左边菜单, 右边主体界面 -->
        <div id="left_menu">
            <ul>
                <li>
                    <a href="javascript:show_miao_biao();">秒表</a>
                </li>
                <li> <a href="javascript:show_ji_shi_qi();">计时器</a></li>
            </ul>
        </div>
        <div id="right_content">
            <div id="miao_biao">
                <div>
                    秒表
                </div>
                <div>
                    <span id="xiao_shi">
                        小时
                    </span>
                    <span>:</span>
                    <span id="fen_zhong">
                        分钟
                    </span>
                    <span>:</span>
                    <span id="miao">
                        秒
                    </span>
                    <span>.</span>
                    <span id="hao_miao" style="font-size: 1em;">
                        毫秒
                    </span>
                </div>
                <div>
                    <span>
                        开始
                    </span>
                    <span>
                        停止
                    </span>
                    <span>
                        标记
                    </span>
                    <span>
                        重置
                    </span>
                </div>
            </div>
            <div id="ji_shi_qi">
                计时器
            </div>
        </div>
        <!-- <script src="../jquery-3.5.1.min.js"></script> -->
	</body>
    <script>
        let miao_biao = document.getElementById('miao_biao');
        let ji_shi_qi = document.getElementById('ji_shi_qi');
        
        let miao_biao_value = {
            h: '00',
            m: '00',
            s: '00',
            ms: '00',
            value: 0
        }
        
        function show_miao_biao () {
            miao_biao.hidden = false
            ji_shi_qi.hidden = true
        }
        
        function show_ji_shi_qi () {
            miao_biao.hidden = true
            ji_shi_qi.hidden = false
        }
        
        show_miao_biao ()
    </script>

</html>
